<template>
  <div>
    <HeaderNav :title="$t('m.headernav.REIGSTER')" :showBack="true" />
    <div class="register_container">
      <div class="register_sex_container">
        	{{$t('m.msg.SEX')}}：
        <van-radio-group v-model="formData.sex" class="register_sex_container register_sex_radio">
          <van-radio icon-size="16" name="man" value='man'>{{$t('m.msg.MAN')}}</van-radio>
          <van-radio icon-size="16" name="woman" value='woman'>{{$t('m.msg.WOMAN')}}</van-radio>
        </van-radio-group>
      </div>
      <div class="register_sex_container">
      		{{$t('m.msg.BIRTHDAY')}}：
          <div class="register_select" @click="setPickerDate(1)">
            {{formData.year}}
          </div>
          <div class="register_select" @click="setPickerDate(2)">
            {{formData.month}}
          </div>
          <div class="register_select" @click="setPickerDate(3)">
            {{formData.day}}
          </div>
      	<!-- <select v-model="formData.year" class="register_select">
      		<!-- <option value="" disabled selected>年</option> 
					<option :value="item" v-for="item in years" :key="item" style="width: 200px;">{{item}}</option>
				</select> -->
				<!-- <select v-model="formData.month" class="register_select" v-on:change="loadDay()">
      		<!-- <option value="" disabled selected>月</option> 
					<option :value="item" v-for="item in months" :key="item">{{item}}</option>
				</select>
				<select v-model="formData.day" class="register_select" >
      		<!-- <option value="" disabled selected>日</option> 
					<option :value="item" v-for="item in days" :key="item">{{item}}</option>
				</select> -->
      </div>
      <div class="register_input_container">
        <img src="../assets/img/user.png" class="register_input_img" />
        <input type="text" :placeholder="$t('m.msg.MSG18')" class="register_input" v-model="formData.name" />
      </div>
      <div class="register_input_container">
        <img src="../assets/img/email.png" class="register_input_img" />
        <input type="text" :placeholder="$t('m.msg.MSG19')" class="register_input" v-model="formData.mail" />
      </div>
      <div class="register_input_container">
        <img src="../assets/img/user.png" class="register_input_img" />
        <input type="text" :placeholder="$t('m.msg.MSG20')" class="register_input" v-model="formData.userName" />
      </div>
      <div class="register_input_container">
        <img src="../assets/img/password.png" class="register_input_img" />
        <input type="password" :placeholder="$t('m.msg.MSG21')" class="register_input" v-model="formData.password" />
      </div>
      <div class="register_input_container">
        <img src="../assets/img/password.png" class="register_input_img" />
        <input type="password" :placeholder="$t('m.msg.MSG22')" class="register_input" v-model="formData.repassword"/>
      </div>
      <div class="register_link_container">
        <router-link to="login" class="register_link">{{$t('m.msg.TO_LOGIN')}}</router-link>
        <!-- <router-link to="login" class="register_link">忘记密码</router-link> -->
      </div>
      <div class="register_btn" @click="register()">{{$t('m.headernav.REIGSTER')}}</div>
    </div>

    <!-- 选择弹框 -->
    <van-popup
      
      v-model="show"
      position="bottom"
      :style="{ height: '40%' }"
      get-container='body'
    >
    <!-- 其他选择 -->
    <van-picker
      show-toolbar
      @cancel="cancel"
      @confirm="confirm"
      :columns="columns" />
    </van-popup>

  </div>
</template>

<script>
import HeaderNav from '@/components/HeaderNav.vue'
import { RadioGroup, Radio, Popup, Picker } from 'vant';
import {postQuery} from '@/api/query';
export default {
  name: 'register',
  components: {
    [Popup.name]: Popup,
    [Picker.name]: Picker,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    HeaderNav
  },
  data() {
    return {
      years:[],
      months:[], 
      days:[],
      columns:[],
      show: false,
      showIndex: 1,
      formData:{
        year: '请选择年',
        month: '请选择月',
        day: '请选择日'
      }
      
    }
  },
  methods: {
    //根据不同选择栏赋值数据
    setPickerDate(index){
      let that = this;
      switch (index) {
        case 1:
          that.columns = that.years;
          break;
        case 2:
          that.columns = that.months;
          break;
        case 3:
          that.columns = that.days;
          break;
      }
      this.showIndex = index;
      this.show = true;
    },
    //隐藏弹框
    cancel(){
      this.show = false;
    },
    //改变选择的值
    confirm(value, index){
      let that = this;
      switch (that.showIndex) {
        case 1:
          that.formData.year = that.columns[index]
          break;
        case 2:
          that.formData.month = that.columns[index]
          break;
        case 3:
          that.formData.day = that.columns[index]
          break;
      }
    
      that.show = false;
    },
    //注册
    register(){
      var that = this;
      //验证
      if(!that.formData.sex){
        that.$toast.fail(that.$i18n.t('m.msg.MSG23'));
        return
      }
      if(that.formData.year == '请选择年' || that.formData.month == '请选择月'
       || that.formData.day == '请选择日'){
        that.$toast.fail(that.$i18n.t('m.msg.MSG24'));
        return
      }
      if(!that.formData.name){
        that.$toast.fail(that.$i18n.t('m.msg.MSG25'));
        return
      }
      if(!that.formData.name){
        that.$toast.fail(that.$i18n.t('m.msg.MSG26'));
        return
      }
      if(!that.formData.password || !that.formData.repassword){
        that.$toast.fail(that.$i18n.t('m.msg.MSG27'));
        return
      }
      if(that.formData.password != that.formData.repassword){
        that.$toast.fail(that.$i18n.t('m.msg.MSG32'));
        return
      }
      let params = {
        name: that.formData.name,
        userName: that.formData.userName,
        password: that.formData.password,
        sex: that.formData.sex,
        mail: that.formData.mail,
        birthDate: that.formatDate()
      };
      console.log(params)
      postQuery('/member/register', params)
        .then (res => {
          if(res.code == 200){
            that.$toast.success(that.$i18n.t('m.msg.MSG28'));
            that.$router.push({
              path:'/login'  
            })
          }else{
            that.$toast.fail(res.msg);
          }
      })
    },
    //格式化年月日
    formatDate(){
      var that = this;
      let month = that.formData.month;
      let day = that.formData.day;
      if(that.formData.month < 10){
        month = '0' + that.formData.month;
      }
      if(that.formData.day < 10){
        day = '0' + that.formData.day;
      }
      return that.formData.year + '-' + month + '-' + day;
    },
    //加载年月日
    loadData(){
    	let that = this;
    	let year = new Date().getFullYear();//获取年
    	for(let i = year; i >= year-90; i --){
    		that.years.push(i);
    	}
    	//初始化月  日
    	for(let i = 1; i < 13; i ++){
    		that.months.push(i);
    	}
    	for(let i = 1; i < 30; i ++){
    		that.days.push(i);
    	}
    },
    //加载天数
    loadDay(){
  
    	let that = this;
    	let arr = [1,3,5,7];
    	if(arr.indexOf(that.months) > -1){
    		that.days.push(31);
    	}else if(that.formData.month == 2){
    		if(that.formData.year%4==0&&that.formData.year%100!=0||that.formData.year%400==0){
    			that.days.length = 29;
    		}else{
    			that.days.length = 28;
    		}
    	}
    	
    }
    
  },
  mounted () {
    this.loadData();
  },
}
</script>
<style scoped>
  .van-radio__icon .van-icon{
    border: 10px solid black;
  }
  .register_container{
    background-color: #E6FEFE;
    height: 90vh;
    width: 100%;
    padding-top: 2vh;
  }

  .register_sex_container{
    display: flex;
    font-size: 26px;
		margin: 0 0 2vh 10vw;
  }

  .register_sex_radio{
    margin-left: 20px;
    /* width: 160px; */
    justify-content: space-between;
  }

  .register_input_container{
    display: flex;
    align-items: center;
    width: 80vw;
    height: 90px;
    border-radius: 50px;
    margin-left: 10vw;
    margin-bottom: 2vh;
    border: 2px #a1a1a1 solid;
    background-color: #FCFCFC;
  }

  .register_input_img{
    height: 40px;
    width: 40px;
    margin: 0px 10px;
  }

  .register_input{
    width: 70%;
    border: none;
    background-color: #FCFCFC;
    zoom: 1.2;
  }

  .register_link_container{
    font-size: 32px;
    /* display: flex; */
    margin-left: 10vw;
    margin-top: 20px;
    /* justify-content: space-between; */

  }

  .register_link{
    color: #01D2FF;
  }

  .register_btn{
    height: 80px;
    width: 80vw;
    margin: 5vh 10vw;
    background-color: #01D2FF;
    color: white;
    font-size: 36px;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .register_select {
    width: 130px;
    border: 1px solid #A1A1A1;
    border-radius: 16px;
    line-height: 40px;
    height: 40px;
    color: #a1a1a1;
		margin-left: 20px;
		font-size:4px;
    text-align: center;
	}
</style>
